<template>
  <div>
    {{ name }}
    <button @click="updatename()">修改name</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "app",
  setup() {
    // var name="zhangsan"
    // 定义响应式数据：
    // reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据
    // 定义响应式数据：
    // ref函数，常用于*简单数据*类型定义为响应式数据
    var name = ref("zhangsan");
    console.log(name);
    const updatename = () => {
      // 要修改它的值要用value
      name.value = "lisi";
      console.log(name);
    };
    return { name, updatename };
  },
};
</script>
